<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="css/bootstrap5.min.css"> -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/productStyle.css">
</head>
<body>
    <!-- 导航栏start -->
    <header class="header">
        <div class="container-fluid">
            <div class="header_content">
                <!-- logo图 -->
                <div class="header_logo">
                    <a href="index.html">
                        <img src="images/logo.jpg" alt="LOGO">
                    </a>
                </div>
                <!-- 导航栏搜索 -->
               <form action="#" class="header_search ms-auto">
                    <input type="text" class="form-control" placeholder="搜你想要">
                    <button type="button">
                        <i class="fa fa-search"></i>
					</button>
                </form>
                <!-- 导航栏中间按钮 -->
                <div class="header_menu">
                    <ul class="header_nav">
                        <li>
                            <a class="header_nav_link" href="index.html" role="button">首页推荐</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="#" role="button" id="digital-area">数码专区</a>
                        </li>
                        <li>
                            <a class="header_nav_link"  role="button" id="my-msg">我的消息</a>
                        </li>
                    </ul>
                </div>
                <!-- 导航栏侧边 -->
                <div class="header_action">
                <ul class="header_action_nav">
                    <li>
                        <div class="dropdown">
                            <a class="header_sign dropdown-toggle" id="login_region" href="#" role="button" data-toggle="dropdown" aria-expanded="false">登录/注册</a>
                                <div class="dropdown-menu" aria-labelledby="login">
                                    <a class="dropdown-item" id="dropdown-login-item" href="login.html">登录</a>
                                    <a class="dropdown-item" id="dropdown-exit-item" >退出</a>
                                </div>
                        </div>
                    </li>
                    <li class="per_Cen">
                        <a class="header_sign" role="button" id="person_center">个人中心</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航end -->

    <!-- 页面主体start -->
    <div class="product-detail-area">
        <div class="user-center-area">
            <div class="product-detail-main">
                <div class="product-view">
                    <div class="product-img-view">
                        <img id="product-cover" src="images/detailimg.jpg" alt="">
                    </div>
                    
                </div>
                <div class="product-info-box">
                    <h3 class="product-info-name" id="product-name">PS4 Pro 游戏机</h3>
                    <p class="sub-detail-introduce">4K画面高品质分辨率带来更细腻的视觉体验，支持HDR更鲜艳的色彩更有质感的画面，性能的提升视觉效果更好，帧率更顺畅稳定。</p>
                    <div class="rent-type-box clearfix">
                      <p class="rent-pattern">租赁模式：</p>
                      <div class="rent-type-choose-area">
                        
                        <ul class="nav nav-pills mb-3 rent_type_1" id="type-tab" role="tablist">
                           <!-- 先租后买 -->
                          <li class="nav-item" role="presentation">
                          <button class="nav-link active" id="type-xianzuhoumai-tab" data-bs-toggle="pill" data-bs-target="#pills-xianzuhoumai" type="button" role="tab" aria-controls="pills-xianzuhoumai" aria-selected="true" >先租后买<i></i></button>
                          </li>
                          <!-- 以租代售 -->
                          <li class="nav-item" role="presentation">
                          <button class="nav-link" id="type-yizudaishou-tab" data-bs-toggle="pill" data-bs-target="#pills-yizudaishou" type="button" role="tab" aria-controls="pills-yizudaishou" aria-selected="false" >以租代售<i></i></button>
                          </li>
                        </ul>
                        <p>租赁方式：</p>
                        <div class="tab-content tab-content1" id="pills-tabContent">
                          <!-- 先租后买 -->
                          <div class="tab-pane fade show active" id="pills-xianzuhoumai" role="tabpanel" aria-labelledby="pills-xianzuhoumai-tab">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                              <li class="nav-item" role="presentation">
                              <button class="nav-link" id="pills-dayrent-tab" data-bs-toggle="pill" data-bs-target="#pills-dayrent" type="button" role="tab" aria-controls="pills-dayrent" aria-selected="true">日租<i></i></button>
                              </li>
                              <li class="nav-item" role="presentation">
                              <button class="nav-link" id="pills-monthrent-tab" data-bs-toggle="pill" data-bs-target="#pills-monthrent" type="button" role="tab" aria-controls="pills-monthrent" aria-selected="false">月租<i></i></button>
                              </li>                 
                              </ul>
                              <div class="tab-content tab-content2" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-dayrent" role="tabpanel" aria-labelledby="pills-dayrent-tab">
                                  <div class="price">
                                  <span class="rentmoney" >日租金：</span>
                                  <div class="price-info">
                                    <em>￥</em><span id="dayprice" class="dayprice"></span>
                                  </div>
                                  </div>
                                  <div class="rent-time-info">
                                    <span class="rent-time">租赁时间：</span>
                                    <!-- 数字增减器 -->
                                    <div class="input-spinner">
                                      <input id="inputsipnner-day" type="number" value="7" min="7" max="1000" step="1"/>
                                    </div>
                                    <div class="nums">
                                      <span>天</span>
                                      <span class="tips">温馨提示，日租最短租期为七天</span>
                                    </div>
                                  </div>
                                  <div class="totalprice-area">
                                    <span class="rentmoney">商品总价：</span>
                                    <div class="goodtotal">
                                      <em>￥</em><span id="totalprice" class="totalprice">9.90</span>
                                    </div>
                                  </div>
                                  <div class="total-rent-price">
                                    <span class="rentmoney">总租金：</span>
                                    <div class="total">
                                      <em>￥</em><span id="daytotalprice" class="daytotalprice"></span>
                                    </div>
                                  </div>
                                </div>
                                <div class="tab-pane fade" id="pills-monthrent" role="tabpanel" aria-labelledby="pills-monthrent-tab">
                                  <div class="price">
                                  <span class="rentmoney">月租金：</span>
                                  <div class="price-info">
                                    <em>￥</em><span id="monthprice" class="monthprice"></span>
                                  </div>
                                  </div>
                                  <div class="rent-time-info">
                                    <span class="rent-time">租赁时间：</span>
                                    <!-- 数字增减器 -->
                                    <div class="input-spinner">
                                      <input id="inputsipnner-month" type="number" value="1" min="1" max="1000" step="1"/>
                                    </div>
                                    <div class="nums">
                                      <span>月</span>
                                    </div>
                                  </div>
                                  <div class="totalprice-area">
                                    <span class="rentmoney">商品总价：</span>
                                    <div class="goodtotal">
                                      <em>￥</em><span  class="totalprice">19.90</span>
                                    </div>
                                  </div>
                                  <div class="total-rent-price">
                                    <span class="rentmoney">总租金：</span>
                                    <div class="total">
                                      <em>￥</em><span id="monthtotalprice" class="monthtotalprice"></span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                        </div>
                          <!-- 以租代售 -->
                        <div class="tab-pane fade" id="pills-yizudaishou" role="tabpanel" aria-labelledby="pills-yizudaishou-tab">
                            <div class="rent-choice-box clearfix">
                              <div class="choice-item" data-mouthnums="3">
                                <div class="rent-money-box">
                                <em>￥</em>
                                <span class="rent-money rent-money-three"></span>
                                </div>
                                <div class="info-rent-type">三个月每期</div>
                              </div>
                              <div class="choice-item" data-mouthnums="6">
                                <div class="rent-money-box">
                                  <em>￥</em>
                                  <span class="rent-money rent-money-six"></span>
                                  </div>
                                  <div class="info-rent-type">六个月每期</div>
                              </div>
                              <div class="choice-item" data-mouthnums="9">
                                <div class="rent-money-box">
                                  <em>￥</em>
                                  <span class="rent-money rent-money-nine"></span>
                                  </div>
                                  <div class="info-rent-type">九个月每期</div>
                              </div>
                              <div class="choice-item" data-mouthnums="12">
                                <div class="rent-money-box">
                                  <em>￥</em>
                                  <span class="rent-money rent-money-twlve"></span>
                                  </div>
                                  <div class="info-rent-type">十二个月每期</div>
                              </div>
                            </div>
                            <div class="tips installment-tips">温馨提示：以租代售模式每期增收1%商品总价手续费</div>
                          </div>
              
                        </div>

                        </div>
                        <!-- 租赁次数   -->
                        <div class="pro-rent-time-area">
                            <span>销量：</span>
                            <span id="pro-buy-times">4654</span>                      
                        </div>
                      
                    </div>
                    <!-- 购买区域 -->
                    <div class="payment-area">
                      <button id="pay-button" class="pay-button">立即租用</button>
                      <button id="buy-immedia-btn" class="pay-button">直接购买</button>
                      
                      <button id="add-collect-btn"><i class="fa fa-heart-o" aria-hidden="true"></i><span>收藏</span></button>
                      <button id="contact-seller-btn"><span>联系卖家</span></button>
                    </div>
                  </div>
            </div>
            <div class="product-detail-introduce">
              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">商品介绍</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">租赁流程</button>
                </li>
              </ul>
              <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                  <div class="quality-ccc">
                    <img src="images/ccc.png" style="width: 1000px;">
                  </div>
                  <div class="detail-content">
                    <img id="detail-img1" src="images/test1.jpg" alt="">
                    <img id="detail-img2" src="images/test2.jpg" alt="">
                    <img id="detail-img3" src="images/test3.jpg" alt="">
                  </div>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
              </div>
              
            </div>
        </div>
    </div>


     <!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
    <!-- Section: Social media -->
    <section
      class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
    >
      <!-- Left -->
      <div class="me-5 d-none d-lg-block">
        <span>Get connected with us on social networks:</span>
      </div>
      <!-- Left -->
  
      <!-- Right -->
      <div>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-facebook-f"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-google"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-instagram"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-linkedin"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-github"></i>
        </a>
      </div>
      <!-- Right -->
    </section>
    <!-- Section: Social media -->
  
    <!-- Section: Links  -->
    <section class="">
      <div class="container text-center text-md-start mt-5">
        <!-- Grid row -->
        <div class="row mt-3">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
            <!-- Content -->
            <h6 class="text-uppercase fw-bold mb-4">
              <i class="fas fa-gem me-3"></i>租好玩
            </h6>
            <p>
                投资有风险，购买需谨慎
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              产品
            </h6>
            <p>
              <a href="#!" class="text-reset">数码</a>
            </p>
            <p>
              <a href="#!" class="text-reset">生活</a>
            </p>
            <p>
              <a href="#!" class="text-reset">娱乐</a>
            </p>
            <p>
              <a href="#!" class="text-reset">工作</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              关于我们
            </h6>
            <p>
              <a href="#!" class="text-reset">经营证照</a>
            </p>
            <p>
              <a href="#!" class="text-reset">平台协议</a>
            </p>
            <p>
              <a href="#!" class="text-reset">隐私政策</a>
            </p>
            <p>
              <a href="#!" class="text-reset">免责声明</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              联系我们
            </h6>
            <p><i class="fa fa-home me-3"></i> New York, NY 10012, US</p>
            <p>
              <i class="fa fa-envelope me-3"></i>
              zuhaowan@example.com
            </p>
            <p><i class="fa fa-phone me-3"></i> + 01 234 567 88</p>
            <p><i class="fa fa-print me-3"></i> + 01 234 567 89</p>
          </div>
          <!-- Grid column -->
        </div>
        <!-- Grid row -->
      </div>
    </section>
    <!-- Section: Links  -->
  <div id="test">dsadas</div>
    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
      © 2021 Copyright:
      <a class="text-reset fw-bold" href="#">zuhaowan.com</a>
    </div>
    <!-- Copyright -->
  </footer>
  <!-- Footer -->
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.bundle461.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- tab不能使用因为bundle.min.js文件版本问题 -->

<script src="js/bootstrap.js"></script>

<script src="js/bootstrap-input-spinner.js"></script>
<script src="js/API/productDetails.js"></script>
<script src="js/jquery.cookie.js"></script>
<!-- 引入input spinner js -->
<script>
  $("input[type='number']").inputSpinner();
</script>
<script>
//初始计算月租总价格
$("#pills-monthrent-tab").on("click",function(){
    var monthprice=Number($('#monthprice').text());
    var rent_time_nums=Number( $("#inputsipnner-month").val());
    var newtotalprice=monthprice*rent_time_nums;
    $('#monthtotalprice').html(newtotalprice.toFixed(2));
})
    
  


</script>
<script>
  //以租代售加入active
  $(".choice-item").click(function(){
  
              $(".choice-item").removeClass("active");
              $(this).addClass("active");
	})
</script>
<script>
    $("#person_center").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("personalCenter.html");
        }
    })
</script>
<script>
    $("#my-msg").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("message.html");
        }
    })
</script>


</html>